<%- include ../public/page_header.html %>





    <!-- 富文本编辑器 -->
    <link href="/public/admin/wysiwyg-editor/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- Include Editor style. -->
    <link href="/public/admin/wysiwyg-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="/public/admin/wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />

    <!-- 引入jquery -->
    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="/public/admin/wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>

    <script type="text/javascript" src="/public/admin/wysiwyg-editor/js/zh_cn.js"></script>


    <!-- 批量上传图片插件 -->

    <link rel="stylesheet" type="text/css" href="/public/admin/webuploader/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/public/admin/webuploader/css/diyUpload.css">
    <script type="text/javascript" src="/public/admin/webuploader/js/webuploader.html5only.min.js"></script>
    <script type="text/javascript" src="/public/admin/webuploader/js/diyUpload.js"></script>

          


    <div class="panel panel-default">              
        
        <div class="panel-body">
            <div class="table-responsive input-form">
                <form action="/admin/goods/doEdit?_csrf=<%=csrf%>" method="post" class="goods_content" enctype="multipart/form-data">                 
                    
                    
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#general"  role="tab" data-toggle="tab">通用信息</a></li>
                            <li role="presentation"><a href="#detail" role="tab" data-toggle="tab">详细描述</a></li>
                            <li role="presentation"><a href="#mix"  role="tab" data-toggle="tab">其他信息</a></li>
                            <li role="presentation"><a href="#attribute"  role="tab" data-toggle="tab">规格与包装</a></li>
                            <li role="presentation"><a href="#photo"  role="tab" data-toggle="tab">商品相册</a></li>              
                            
                    </ul>
                    
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="general">

                                <input type="hidden" name="id" value="<%=goods._id%>" />
                                <ul class="form_input">
                                        <li> <span> 商品标题:</span> <input type="text" name="title" class="input"  value="<%=goods.title%>" /></li>                            
                                        <li> <span> 附属标题:</span> <input type="text" name="sub_title" class="input" value="<%=goods.sub_title%>"/></li>
                                        <li>  <span>商品版本:</span> <input type="text" name="goods_version" class="input"value="<%=goods.goods_version%>" /></li>                           
                                        <li>  <span>所属分类:</span> 
                                            
                                            <select name="cate_id" id="cate_id">

                                                <%for(var i=0;i<goodsCate.length;i++){%>
                              
                                                        <option value="<%=goodsCate[i]._id%>" <%if(goods.cate_id.toString()==goodsCate[i]._id.toString()){%>selected<%}%> ><%=goodsCate[i].title%></option>
                                                        <%for(var j=0;j<goodsCate[i].items.length;j++){%>
                                                                <option value="<%=goodsCate[i].items[j]._id%>" <%if(goods.cate_id.toString()==goodsCate[i].items[j]._id.toString()){%>selected<%}%>>----<%=goodsCate[i].items[j].title%></option>      
        
                                                                
                                                        <%}%>

                                                <%}%>

                                            
                                            </select>
                    
                                            <input type="hidden" name="cname" id="cname" />    
                    
                                        </li>
                                        <li> <span> 商品图片:</span> <input type="file" name="goods_img"/>                                        
                                             <span> </span>   <img class="pic" src="<%=goods.goods_img%>" />
                                        </li> 
                                        <li>  <span>商品价格:</span> <input type="text" name="shop_price" value="<%=goods.shop_price%>"/></li>
                                        <li>  <span>商品原价:</span>  <input type="text" name="market_price" value="<%=goods.market_price%>"/></li>


            
                                        <li> <span>商品状态:</span>　
                                            
                                            <input type="radio" name="status" <%if(goods.status==1){%> checked <%}%> value="1" id="a"/> <label for="a">显示</label>    
                                            
                                            <input type="radio" name="status"  <%if(goods.status==0){%> checked <%}%>   value="0" id="b"/><label for="b">隐藏</label>


                                         </li>
                     
                                         <li> <span>加入推荐:</span>　<input type="checkbox" value="1" <%if(goods.is_best==1){%> checked <%}%>  name="is_best"/> 精品
                                            <input type="checkbox" value="1" name="is_hot" <%if(goods.is_hot==1){%> checked <%}%> /> 热销
                                            <input type="checkbox" value="1" name="is_new" <%if(goods.is_new==1){%> checked <%}%> /> 新品
                                         </li>
                               </ul>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="detail">

                            <textarea name="goods_content" id="content" cols="100" rows="8"><%=goods.goods_content%></textarea>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="mix">
                                
                                <ul class="form_input">

                                        <li> <span>商品颜色:</span>
                                           
                                                <%for(var i=0;i<colorResult.length;i++){%>


                                                    <%if(goods.goods_color.indexOf(colorResult[i]._id.toString())!=-1){%>
                                                        
                                                        <input type="checkbox" checked name="goods_color" value="<%=colorResult[i]._id%>" id="color_<%=colorResult[i]._id%>" /> <label for="color_<%=colorResult[i]._id%>"><%=colorResult[i].color_name%></label>

                                                   <%}else{%>
                                                        <input type="checkbox" name="goods_color" value="<%=colorResult[i]._id%>" id="color_<%=colorResult[i]._id%>" /> <label for="color_<%=colorResult[i]._id%>"><%=colorResult[i].color_name%></label>
                                                    <%}%>

                                                <%}%>
        
                                         </li>
        
        
                                         <li> <span>关联商品:</span>
                                            
                                                <input type="text" name="relation_goods" class="relation_goods" value="<%=goods.relation_goods%>"/>  <i>填写关联商品的id 多个以逗号隔开 格式：23,24,39</i>
                                            
                                        </li>      
                                        
                                        
                                        <li> <span>关联赠品:</span>
                                            
                                                <input type="text" name="goods_gift" class="goods_gift" value="<%=goods.goods_gift%>"/>  <i>可为空 格式：23-2,39-5 说明：例如23-2 中的23表示商品id,2表示商品数量</i>
                                            
                                        </li>    
                                        <li> <span>关联配件:</span>
                                            
                                            <input type="text" name="goods_fitting" class="goods_fitting" value="<%=goods.goods_fitting%>"/>  <i>可为空 格式：23-2,39-5 说明：例如23-2 中的23表示商品id,2表示商品数量</i>
                                        
                                        </li>    
        
        
                                        <li> <span>更多属性:</span>
                                            
                                                <input type="text" name="goods_attr" class="goods_attr" value="<%=goods.goods_attr%>"/>  <i> 格式:  颜色:红色,白色,黄色 | 尺寸:41,42,43</i>
                                            
                                        </li>

                                        <li> <span>Seo关键词:</span>
                                            
                                            <input type="text" name="goods_keywords" class="goods_keywords" value="<%=goods.goods_keywords%>"/>  
                                        
                                        </li>

                                        <li> <span>Seo描述:</span>                                                
                                            <textarea name="goods_desc" id="goods_desc" cols="100" rows="2"><%=goods.goods_desc%></textarea>
                                        
                                        </li>
                                 
                                       
                                         
                                        
                                </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="attribute">

                                
 
                                <ul class="form_input">

                                        <li> <span>商品类型:　</span>
                                            
                                            <select name="goods_type_id" id="goods_type_id">

                                                <option value="0">--请选择商品类型--</option>

                                                <%for(var i=0;i<goodsType.length;i++){%>
                                                    <option value="<%=goodsType[i]._id%>" <%if(goods.goods_type_id.toString()==goodsType[i]._id.toString()){%>selected<%}%> ><%=goodsType[i].title%></option>
                                                <%}%>

                                            </select>
        
                                         </li>
        
                                </ul>


                                <ul class="form_input" id="goods_type_attribute">

                                        <%-goodsAtts%>

                                </ul>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="photo">


                                <div id="goods_image">    
                                        <ul id="goods_image_list" class="goods_image_list clear">
   
                                               <%for(var i=0;i<goodsImage.length;i++){%>
                                                   <li>
                                                       <img class="pic" src="<%=goodsImage[i].img_url%>" />
   
                                                       <div class="color_list">
   
                                                           <select class="relation_goods_color" goods_image_id="<%=goodsImage[i]._id%>">
                                                               <option value="">关联颜色</option>

                                                               <%for(var j=0;j<goodsColor.length;j++){%>
   
                                                                    <option value="<%=goodsColor[j]._id%>" <%if(goodsImage[i].color_id.toString()==goodsColor[j]._id){%>selected<%}%>  ><%=goodsColor[j].color_name%></option>
                                                               <%}%>
                                                           </select>                                                        
                                                       </div>

                                                       <div class="goods_image_delete" goods_image_id="<%=goodsImage[i]._id%>"></div>
                                                   </li>
                                               <%}%>
                                        </ul>
                              </div>

                                <div id="photoLib"  class="photoLib"></div>


                                <div id="photoList">


                                </div>
                        </div>
                    </div>
                     

                    

                    <button type="submit" class="btn btn-success goods_content_btn">提交</button>
    


                </form>
            </div>
        </div>


    </div>



    <!-- 缓存当前的属性信息 -->
    <div id="goods_attr_value" style="display:none">

            <%-goodsAtts%>
    </div>

<script>

        $(function(){
    
            //关联商品类型
            $('#goods_type_id').change(function(){

                    // alert($(this).val());

                    var cate_id=$(this).val();


                    if(cate_id=='<%=goods.goods_type_id.toString()%>'){

                            $('#goods_type_attribute').html($('#goods_attr_value').html());                            
                    }else{                   

                    var data='';
                    $.get('/admin/goods/goodsTypeAttribute?cate_id='+cate_id,function(response){
                       
                        data=response.result;     
                        var str="";
                        for(var i=0;i<data.length;i++){

                            if(data[i].attr_type==1){    
                            str+='<li><span>'+data[i].title+': 　</span><input type="hidden" name="attr_id_list" value="'+data[i]._id+'" />  <input type="text" name="attr_value_list" /></li>' 
                            }else if(data[i].attr_type==2){
                                str+='<li><span>'+data[i].title+': 　</span> <input type="hidden" name="attr_id_list" value="'+data[i]._id+'">  <textarea cols="50" rows="3" name="attr_value_list"></textarea></li>'                            
                            }else{
                                var arr=data[i].attr_value.split('\n');   

                                str+='<li><span>'+data[i].title+': 　</span><input type="hidden" name="attr_id_list" value="'+data[i]._id+'">';

                                    str+='<select name="attr_value_list">';
                                        
                                        for(var j=0;j<arr.length;j++){
                                            
                                            str+='<option value="'+arr[j]+'">'+arr[j]+'</option>';
                                        }
                                    str+='</select>';
                                str+='</li>';
                            }

                        }    

                        $('#goods_type_attribute').html(str);
                    })

                
                    }
                })
            })
            //富文本编辑器
        
            $(function() {
                $('#content').froalaEditor({
                    height: 300,    //给编辑器设置默认的高度
                    language: 'zh_cn',   
                    imageUploadURL: '/admin/goods/goodsUploadImage',
                    //根据不同的分辨率加载不同的配置
                    toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],
                    toolbarButtonsMD: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],
                    toolbarButtonsSM: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo']
                });
            });


            //批量上传图片

            $(function(){


                var photoStr='';                
                $('#photoLib').diyUpload({
                    url:'/admin/goods/goodsUploadPhoto',                    
                    success:function( response ) {
                        // console.info( data );
                        photoStr='<input type="hidden" name="goods_image_list" value='+response.link+' />';

                        $('#photoList').append(photoStr);
                    },
                    error:function( err ) {
                        console.info( err );	
                    }
                });
            })


            

            $(function(){


                
                //改变颜色
                   $('.relation_goods_color').change(function(){

                     
                       var color_id=$(this).val();
                       var goods_image_id=$(this).attr('goods_image_id');

                       console.log(color_id,goods_image_id);

                        $.post('/admin/goods/changeGoodsImageColor?_csrf=<%=csrf%>',{color_id:color_id,goods_image_id:goods_image_id},function(response){

                                console.log(response);
                        })

                   })


                   //删除图片

                   $('.goods_image_delete').click(function(){

                       var _that=this;

                       var flag=confirm('您确定要删除吗?');

                       if(flag){
                            var goods_image_id=$(this).attr('goods_image_id');

                            $.post('/admin/goods/goodsImageRemove?_csrf=<%=csrf%>',{goods_image_id:goods_image_id},function(response){

                                    console.log(response);

                                    if(response.success){

                                        $(_that).parent().remove();

                                    }
                            })
                       }


                   })

            })
 </script>
</body>
</html>